<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二个jquery页面</title>
    <script type="text/javascript" src="../js/jquery-3.5.1.js"></script>
    <style type="text/css">
        div {
            border:1px solid black;
            width: 1000px;
            height: 100px;
        }
        #div1 {
            width: 100px;
            height: 20px;
            border: 2px solid red;
            /*display: none;*/
            /*visibility: hidden;*/
        }
        #div2 {
            width: 100px;
            height: 20px;
            border: 2px solid blue;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // console.info($("*"));
            // $("div").css("border","1px solid red");
            // $("#span").css("color","blue");
            // $(".span").css("color","green");
            // $("#span,.span").css("color","red");
            // $("p.span").css("color","red");
            // $("div span").css("color","red");
            // $("div>span").css("color","red");
            // $(".span+div").css("color","red");
            // $("li").css("color","red");
            // $("li:first").css("border","1px solid red");
            // $("li:last").css("border","1px solid red");
            // $("li:even").css("color","red");
            // $("li:odd").css("border","1px solid red");
            // $("li:eq(1)").css("border","1px solid red");
            // $("li:lt(2)").css("border","1px solid red");
            // $("li:gt(2)").css("border","1px solid red");
            // $("li:not(#li)").css("border","1px solid red");
            // $("li:contains('标题1')").css("border","1px solid red");
            // $("li:empty").css("border","1px solid red");
            // $("li:has(span)").css("border","1px solid red");
            // $("input[value]").css("color","red");
            // $("input[value=tom]").css("color","red");
            // $("input[value^=zhang]").css("color","red");
            // $("input[value$=tom]").css("color","red");
            // $("input[value*=tom]").css("color","red");
            // $("input[value!=tom]").css("color","red");
            $("input[value!=tom][value!=jack]").css("color","red");
        })
    </script>
</head>
<body>
    <!--
    <div>
        第一个div
        <b>
            第一个div的孩子b
            <span class="span">第一个div中的孙子span</span>
            <span class="span">第一个div中的孙子span</span>
        </b>
        <span id="span">第一个div中的孩子span</span>
        <b>
            第一个div中的孩子b
            <span class="span">第一个div中的孙子span</span>
            <span class="span">第一个div中的孙子span</span>
        </b>
    </div>
    <div>
        第二个div
        <p id="p">这是第二个div的孩子</p>
        <p class="span">这是第二个div的孩子p</p>
        <div id="div">这是第二个div的孩子div</div>
        <div>这是第二个div的孩子div</div>
    </div>
    <div id="div">
        <div id="div1">测试1</div>
        <div id="div2">测试2</div>
    </div>
    <ul>
        <li></li>
        <li>标题1</li>
        <li id="li">标题2</li>
        <li>
            标题3
            <h2>测试1</h2>
        </li>
        <li><span></span></li>
        <li>标题5</li>
    </ul>
    -->
    <input type="text"><br/>
    <input type="text" value="tom"><br/>
    <input type="text" value="jack"><br/>
    <input type="text" value="zhangtom"><br/>
    <input type="text" value="zhangjack"><br/>
    <input type="text" value="ztomg"><br/>
</body>
</html>